<template>
<div class="player">
      <video-player
		 class="vjs-custom-skin"
         :options="playerOptions"
         :playsinline="true"
         @play="onPlayerPlay($event)"
         @pause="onPlayerPause($event)"
         @ended="onPlayerEnded($event)"
         @loadeddata="onPlayerLoadeddata($event)"
         @waiting="onPlayerWaiting($event)"
         @playing="onPlayerPlaying($event)"
         @timeupdate="onPlayerTimeupdate($event)"
         @canplay="onPlayerCanplay($event)"
         @canplaythrough="onPlayerCanplaythrough($event)"
         @ready="playerReadied"
         @statechanged="playerStateChanged($event)">
      </video-player>
</div>
</template>

<script>
  import 'vue-video-player/src/custom-theme.css'
  
  export default {
    data() {
      return {
        playerOptions: {
          height: '360',
          autoplay: false,
          muted: true,
          language: 'zh-CN',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: ''
          }],
          poster: ""
        }
      }
    },
    props: {
        videoUrl: String,
        posterUrl: String
	},
    mounted() {
    	if(this.posterUrl){
    		this.playerOptions.poster=this.posterUrl;
    	}
    	if(this.videoUrl){
    		this.playerOptions.sources[0].src=this.videoUrl;
    	}
    },
    computed: {
    },
    methods: {
      onPlayerPlay(player) {
      },
      onPlayerPause(player) {
      },
      onPlayerEnded(player) {
      },
      onPlayerLoadeddata(player) {
      },
      onPlayerWaiting(player) {
      },
      onPlayerPlaying(player) {
      },
      onPlayerTimeupdate(player) {
      },
      onPlayerCanplay(player) {
      },
      onPlayerCanplaythrough(player) {
      },
      playerStateChanged(playerCurrentState) {
      },
      playerReadied(player) {
        player.currentTime(10)
      }
    },
    watch:{
    	posterUrl : {
    		handler: function(newVal,oldVal){
	    		if(newVal){
	    			this.playerOptions.poster=newVal;
	    		}
    		}
    	},
    	videoUrl :{
    		handler: function(newVal,oldVal){
    			if(newVal){
		    		this.playerOptions.sources[0].src=newVal;
		    	}
    		}
    	}
    }
  }
</script>